<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css" type="text/css"/>
    <link href="${pageContext.request.contextPath }/css/reg.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/base.css" type="text/css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/headbott.css" type="text/css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/index.css" type="text/css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/ly-list.css" type="text/css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/reg.css" type="text/css"/>
    	<script type="text/javascript" src="${pageContext.request.contextPath}/js/project/jquery.min.js">
</script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/project/ptype.js">
</script>
    <title></title>
</head>
<body>
<!--上部导航栏开始-->
<div id="header">
    <div class="heade-con">
        <div class="logo"><a href="#"><img src="${pageContext.request.contextPath }/images/LOGO.png"/></a></div>
        <div class="nav posa">
            <ul>
                <li><a href="${pageContext.request.contextPath }/pages/frontIndex.action">首页</a></li>
                <li><a href="${pageContext.request.contextPath }/Projects/frontList.action">公益众筹</a></li>
                <li><a href="${pageContext.request.contextPath }/add/questionAllList.action">常见问题</a></li>
                <li><a href="${pageContext.request.contextPath }/news/frontComments.action">众筹资讯</a></li>
                <li><a class="vcolor" href="${pageContext.request.contextPath }/pages/publish/TheProject.action" style="">发布项目</a></li>
            </ul>
        </div>
        <div class="search">
            <form action="#">
                <input type="text" class="search-txt" value="" placeholder="找项目">
                <input type="submit" class="search-but" value="">
            </form>
        </div>
        <div class="index-login">
<c:if test="${user == null }">
				<a href="${pageContext.request.contextPath }/pages/frontLogin.action">登录</a>
				<span style="color: white;">|</span>
				<a href="reg.html">注册</a>
				<span style="color: white;">|</span>
				</c:if>
				<c:if test="${user != null }">
				
				<a href="${pageContext.request.contextPath }/pages/user.action" style="color:green;font-size:20px">热烈欢迎: ${user.name }</a>
				<a  href="${pageContext.request.contextPath }/pages/secede.action" style="color:red;font-size:18px">退出</a>
				</c:if>
        </div>
    </div>
</div>
<!--上不导航栏结束-->
<!--中间核心-->
<div class="product">
    <!--头上表格-->
    <div class="product-table">
        <div class="product-left">
            <table class="table table-bordered">
                <tr class="text-center">
                    <td class="title-td"><a href="${pageContext.request.contextPath }/pages/publish/newProduct.action">基本信息</a></td>
                    <td class="active title-td"><a href="${pageContext.request.contextPath }/pages/publish/TheProject.action">项目信息</a></td>
                    <td class="title-td"><a href="${pageContext.request.contextPath }/pages/publish/newDetaill.action">详细描述</a></td>
                    <td class="title-td"><a href="${pageContext.request.contextPath }/pages/publish/newBack.action">回报设置</a></td>
                </tr>
            </table>
        </div>
        <div class="product-right">
            <table class="table table-bordered">
                <tr class="text-center">
                    <td class="title-td">预览</td>
                </tr>

            </table>

        </div>
    </div>
    <!--下部foem表单-->
    <div class="product-form">
        <!--上标题-->
        <div class="product-title">
            <div class="my-h4">
                <h4>创建你的项目信息</h4>
            </div>
            <div class="btn-save">
                <button class="btn btn-default" id="saveDraft" onClick="saveDraft()" >保存草稿</button>
            </div>

        </div>
        <div class="clear"></div>
        <hr>
       <!--  <div class="product-info-input">
                    <b>设置封面：</b>
                    <input type="file" id = "chooseImage" name="photo">
                    
				<img id="cropedBigImg" style="width:100px " alt="11" >
				<img id="cropedBigImg" style="width:100px " src="http://localhost:8080/img/2018-12-05.png" alt="11" >
				<button onclick="file1()">上传</button>
                </div>
        表单 -->
        <form id="projectinfoForm" action="#" method="post" enctype="multipart/form-data">
            <div class="my-form">
                <div class="product-info-input">
                    <b>设置封面：</b>
                    <input type="file" id = "chooseImage" name="photo">
                    
				<img id="cropedBigImg" style="width:100px " alt="11" >
				<!-- <img id="cropedBigImg" style="width:100px " src="http://localhost:8080/img/2018-12-05.png" alt="11" > -->
				<button onclick="file1()">上传</button>
                </div>
                <div class="product-info-input"><b>项目标题：</b>
                <input class="text" type="text" name="name" id="name" placeholder="给自己的项目起个漂亮的名字吧"></div>
                <div class="product-info-input"><b>筹款目的：</b><div class="text-area">
                <textarea name="goal" id="goal" rows="2" placeholder="一句话介绍一下你的项目吧"></textarea></div></div>
                <div class="product-info-select">
                    <div class="product-info-text">
                    <input type="hidden" id="address" name="address"/>
                    <b>项目地点：</b></div>
                    <div class="product-info-select1">
                        <select class="info-select1" name="province" onchange="getCity(this.value)">
                            <option>请选择</option>
                        </select>
                    </div>
                    <div class="product-info-select2">
                        <select class="info-select2" name="city">
                            <option>请选择</option>
                        </select>
                    </div>
                </div>

                <div class="product-info-input"><b>筹资金额：</b><input name="money" id="money" class="text" type="text" placeholder="输入你需要的金额，最少500元">元</div>
                <div class="product-info-input"><b>筹资天数：</b><input name="days" id="days" class="text" type="text" placeholder="">天</div>
            </div>
        </form>
    </div>
</div>
<!--底部开始-->
<div id="bottom">
    <div class="bottom-ggt"><a href="#"><img src="${pageContext.request.contextPath }/images/bottbom_68.jpg" alt=""/></a></div>
    <div class="zc-yqlink">
        <ul>
            <li><a href="#">阿里巴巴集团</a></li>
            <li><a href="#">淘宝网</a></li>
            <li><a href="#">天猫</a></li>
            <li><a href="#">聚划算</a></li>
            <li><a href="#">全球速卖通</a></li>
            <li><a href="#">阿里巴巴国际交易市场</a></li>
            <li><a href="#">1688</a></li>
            <li><a href="#">阿里妈妈</a></li>
            <li><a href="#">阿里旅行</a></li>
            <li><a href="#">阿里云计算</a></li>
            <li><a href="#">阿里巴巴集团</a></li>
            <li><a href="#">淘宝网</a></li>
            <li><a href="#">天猫</a></li>
            <li><a href="#">聚划算</a></li>
            <li><a href="#">全球速卖通</a></li>
            <li><a href="#">阿里巴巴国际交易市场</a></li>
            <li><a href="#">1688</a></li>
            <li><a href="#">阿里妈妈</a></li>
            <li><a href="#">阿里云计算</a></li>
        </ul>
    </div>
    <div class="footer-bd">

        <a href="#">关于淘宝</a>
        <a href="#">合作伙伴</a>
        <a href="#">营销中心</a>
        <a href="#">廉正举报</a>
        <a href="#">联系客服</a>
        <a href="#">开放平台</a>
        <a href="#">诚征英才</a>
        <a href="#">联系我们</a>
        <a href="#">网站地图</a>
        <a href="#">法律声明</a>　　　
        <em>© 2003-2015 Taobao.com 版权所有</em><br>

        <br>
        <span>网络文化经营许可证：<a href="#">浙网文[2013]0268-027号</a></span>
        <b>|</b>
        <span data-spm-protocol="i">增值电信业务经营许可证：<a href="#">浙B2-20080224-1</a></span>
        <b>|</b>
        <span>信息网络传播视听节目许可证：1109364号</span>
        <b>|</b>
        <span>举报电话:0571-81683755</span>
    </div>
</div>
<script type="text/javascript">
function saveDraft(){
	/* var form = new FormData(document.getElementById("projectinfoForm")); */
	$.ajax({
		url : "${pageContext.request.contextPath }/add/photo.action",
		method : "post",
		dataType : "json",
		data: $("#projectinfoForm").serialize(),
		/* processData:false,
		contentType: false, */
		success : function(data){
			alert("++++++++" + data.msg);
		},
		error : function(){
			alert("保存草稿失败!!!");
		}
	})
}


function file1() {
	var form = new FormData(document.getElementById("projectinfoForm"));
	//console.log(form);
	$.ajax({
		url : "${pageContext.request.contextPath }/add/file.action",
		dataType : "json",
		method : "post",
		data : form,
		processData : false,
		contentType : false,
		async : false,
		success : function(data) {
			alert("++++++++" + data.msg);
			//alert(data.url1);
			$('#cropedBigImg').attr('src',data.url1);
		},
		error : function() {
			 alert("上传失败 ");
		}
	});
}

$('#chooseImage').on('change',function(){
   	var filePath = $(this).val(),         //获取到input的value，里面是文件的路径
   		fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
   		src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
   		
   	// 检查是否是图片
   	if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
   		error_prompt_alert('上传错误,文件格式必须为：png/jpg/jpeg');
       	return;  
       }
 		//alert(filePath);
       $('#cropedBigImg').attr('src',src);
});

/**
 * ajax获取省市级联菜单
 */

// 由于jsp中${pageContext.request.contextPath}在js中无法识别，所以使用js来获取访问的路径
function getRealPath(){
	//获取当前网址，如： http://localhost:8083/myproj/view/ahha.jsp
	var curWwwPath=window.document.location.href;
	//获取主机地址之后的目录，如： myproj/view/ahha.jsp
	var pathName=window.document.location.pathname;
	var pos=curWwwPath.indexOf(pathName);
	//获取主机地址，如： http://localhost:8080
	var localhostPaht=curWwwPath.substring(0,pos);
	//获取带"/"的项目名，如：/ahha
	var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
	 
	//得到了 服务器名称和项目名称
	var realPath=localhostPaht+projectName;
	
	return realPath;
}

// 声明全局变量pageContext
var pageContext = getRealPath();

// 初始化省市级联菜单
$(function(){
	getProvince();
})

// 获取省份的ajax请求
function getProvince() {
	
	
	var pId = $("select[name=province]").val();

	$.ajax({
				url : pageContext + "/region/front/province.action",
				method : "post",
				dataType : "json",
				async : true,
				success : function(data) {
					//alert(data.length);
					var provinceList = data.provinces;
					for (var i = 0; i < provinceList.length; i++) {
						// 浏览器控制台打印
						console.log(provinceList[i].id + "、"
								+ provinceList[i].name);
						var option = "<option value=\"" + provinceList[i].id
								+ "\"";
						option += ">" + provinceList[i].name + "</option>"; // 动态添加数据
						$("select[name=province]").append(option);
					}
				},
				error : function() {
					alert("对不起，省份出错啦！");
				}
			});
}
// 获取市的ajax请求
function getCity(id) {
	// alert("获取城市===="+id);
	$.ajax({
		url : pageContext + "/region/front/city.action",
		data : {
			"id" : id
		},
		method : "post",
		dataType : "json",
		async : true,
		success : function(data) {
			$("select[name=city]").empty();
			var cityList = data.cities;
			for (var i = 0; i < cityList.length; i++) {
				console.log(cityList[i].id + "、" + cityList[i].name);
				var option = "<option value=\"" + cityList[i].id + "\"";
				option += ">" + cityList[i].name + "</option>"; // 动态添加数据
				$("select[name=city]").append(option);
			}
		},
		error : function() {
			alert("对不起，城市出错啦！");
		}
	});
}

</script>
</body>
</html>